import React, { Component, Fragment } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Create from './components/create.component';
import Edit from './components/edit.component';
import Index from './components/index.component';
import Signup from './components/signup.component';
import Signin from './components/signin.component';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <Link to={'/'} className="navbar-brand">加班登记系统</Link>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav mr-auto">
              <li className="nav-item">
                  <Link to={'/'} className="nav-link">登记</Link>
                </li>
                {/* <li className="nav-item">
                  <Link to={'/create'} className="nav-link">登记</Link>
                </li> */}
                <li className="nav-item">
                  <Link to={'/index'} className="nav-link">查询</Link>
                </li>
                {(window.localStorage.getItem('access_token'))
                ? 
                <li className="nav-item">
                <span className="nav-link" to={'/index'}>{window.localStorage.getItem('username')}[工号:{window.localStorage.getItem('id')}]欢迎您</span>
                </li>
                
                : <Fragment>
                <li className="nav-item">
                  <Link to={'/signup'} className="nav-link">注册</Link>
                </li>
                <li className="nav-item">
                  <Link to={'/signin'} className="nav-link">登录</Link>
                </li>
                </Fragment>
                }
              </ul>
            </div>
          </nav>
          <Switch>
              <Route exact path='/' component={ Create } />
              <Route path='/edit/:id' component={ Edit } />
              <Route path='/index' component={ Index } />
              <Route path='/signup' component={ Signup } />
              <Route path='/signin' component={ Signin } />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;
